import React, { useState, useEffect } from 'react';
import './Read.css'
import { recommend, literaryrecommend } from '../../assets/api/recommend';
import { Swiper, SwiperSlide } from 'swiper/react';
import double from '../../assets/img/double.png';
import Cate from '../../components/Cate/Cate';
import CateDetail from '../../components/CateDetail/CateDetail';
import { allcate } from '../../assets/api/cate';
import Search from '../../components/Search/Search';



export default function Read(props) {
  const [searchshow, setsearchshow] = useState(false);
  const [titleindex, settitleindex] = useState(0);//大分类下标
  const [cateshow, setcateshow] = useState(false);
  const [scrollTop, setscrollTop] = useState(0);
  const [recommendlist, setrecommendlist] = useState([]);
  const [literaryrecommendlist, setliteraryrecommendlist] = useState([]);
  const [index, setindex] = useState(0);
  const [changetype, setchangetype] = useState(0);
  const [catelist, setcatelist] = useState([]);
  const [catedetailshow, setcatedetailshow] = useState(false);
  const [catedetailtitle, setcatedetailtitle] = useState("精品书籍");
  const [catedetailindex, setcatedetailindex] = useState(0);
  const [bottom, setbottom] = useState(0);
  const [searchbottom, setsearchbottom] = useState(1);
  useEffect(() => {
    allcate().then(data => {
      console.log(data);
      data.pop();
      setcatelist(data);
    })
  }, []);
  function showsearch(){
    setsearchshow(true);
    props.setban(true);
  }
  function hidesearch(){
    setsearchshow(false);
    props.setban(false);
  }

  function showcatedetail(type,index) {
    settitleindex(index);
    setcatedetailtitle(type);
    setcatedetailindex(type==="精品书籍"?2:type==="男生小说"?0:1);
    setcatedetailshow(true);
    props.setban(true);
  }
  function hidecatedetail() {
    setcatedetailshow(false)
    props.setban(false);
  }
  function showcate() {
    setcateshow(true);
    props.setban(true);
  }
  function hidecate() {
    setcateshow(false)
    props.setban(false);
  }
  function handleScroll() {
    setscrollTop(document.documentElement.scrollTop)
  }
  function hS(e){
    let scrollBottom = e.target.scrollHeight-e.target.scrollTop-e.target.clientHeight
    setbottom(scrollBottom);
    
  }
  function hStwo(e){
    let scrollBottom = e.target.scrollHeight-e.target.scrollTop-e.target.clientHeight
    setsearchbottom(scrollBottom);
  }
  useEffect(() => {
    //添加滚动事件
    window.addEventListener('scroll', handleScroll)
    document.getElementsByClassName("catedetailbox")[0].addEventListener('scroll', hS)
    document.getElementsByClassName("searchbox")[0].addEventListener('scroll', hStwo)
    //推荐书籍
    recommend().then(data => {
      console.log(data);
      setrecommendlist(data.jsonResponse.data.books)
    })
    //猜你喜欢
    literaryrecommend().then(data => {
      console.log(data);
      setliteraryrecommendlist(data.list);
    })
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, []);
  useEffect(() => {
    //有这个状态时就会有动画，重置后才能触发下一次，防抖
    setTimeout(() => {
      setchangetype(0)
    }, 500);
  }, [index]);
  //点击换一本时换封面图片
  function changeindex() {
    if (changetype) {
      return;
    }
    setTimeout(() => {
      let newindex = (index === literaryrecommendlist.length - 1 ? 0 : index + 1);
      setindex(newindex);
    }, 100);

    setchangetype(1);
  }

  return (
    <div className='readbox'>
      <Search changebooksid={props.changebooksid} searchbottom={searchbottom} show={searchshow} hidesearch={hidesearch}/>
      <CateDetail changebooksid={props.changebooksid} bottom={bottom} titleindex={titleindex} settitleindex={settitleindex} catedetailindex={catedetailindex} catelist={catelist} show={catedetailshow} hidecatedetail={hidecatedetail} title={catedetailtitle}/>
      <Cate showcatedetail={showcatedetail} catelist={catelist} show={cateshow} hidecate={hidecate} />
      <div className="topblankbox"></div>
      <div className={"readtopbox " + (scrollTop ? "" : "act")}>
        <div className="readsearchbox" onClick={showsearch}>
          <div className="iconfontbox">
            <i className='iconfont icon-sousuo'></i>
          </div>
          <div className="placeholder">雪中悍刀行</div>
          <div className="rightbutton">
            书城
          </div>
        </div>
      </div>
      <div className="middle">
        <div className="cate" onClick={showcate}>分类 <i className='iconfont icon-you'></i></div>
        <div className='man' onClick={()=>showcatedetail("男生小说",0)}>男生小说<i className='iconfont icon-you'></i></div>
        <div className="woman" onClick={()=>showcatedetail("女生小说",0)}>女生小说<i className='iconfont icon-you'></i></div>
      </div>
      <div className="readcontent">
        <div className="contentrecommend">
          <Swiper
            spaceBetween={14}
            slidesPerView={4}
            observer={true}
            observeParents={true}
          >
            {
              recommendlist.map((item, index) => (
                <SwiperSlide key={index}>
                  <div className="recommendminbox" onClick={() => props.changebooksid(item.sourceUuid)}>
                    <div className="imgbox">
                      <img src={item.cover} alt="" />
                    </div>
                    <div className="booktitle">{item.title}</div>
                  </div>

                </SwiperSlide>
              ))
            }



          </Swiper>

        </div>
        <div className="contentminbox hunmanlost">
          <div className="doublebox">
            <img src={double} alt="" />
          </div>
          <div className="hummanlostcontent">
            我的骄傲不允许我把这崩溃的日子告诉别人，只有我知道，仅一夜之间，我的心判若两人。
          </div>
          <div className="hummanlostdetail">
            <div className="cover" onClick={() => props.changebooksid("8e370e9887dc4430bbc65d5c1f702ab1_4")}>
              <img src="https://easyreadfs.nosdn.127.net/qoB_h7sZy4eSzQXLu5bbzg==/8796093024911777273" alt="" />
            </div>
            <div className="hummanlosttitle">
              人间失格
              <div className="author">
                [日]太宰治
              </div>
            </div>

          </div>
        </div>
        <div className="contentminbox guess">
          <div className="guseetitle">
            猜你喜欢
          </div>
          <div className={"guseeimg " + (changetype ? "con" : "")} onClick={() => props.changebooksid(literaryrecommendlist[index].id)}>
            {
              literaryrecommendlist[index] ? <img src={literaryrecommendlist[index].cover} alt="" /> : <img src='' alt='' />
            }
          </div>
          <div className="guessbutton" onClick={() => props.changebooksid(literaryrecommendlist[index].id)}>立即阅读</div>
          <div className='guesschange' onClick={changeindex}>换一本</div>
        </div>
        <div className="contentminbox gatsby">
          <div className="doublebox" >
            <img src={double} alt="" />
          </div>
          <div className="hummanlostcontent">
            如果打算爱一个人，你要想清楚,是否愿意为了他，放弃如上帝般自由的心灵，从此心甘情愿有了羁绊。
          </div>
          <div className="hummanlostdetail">
            <div className="cover" onClick={() => props.changebooksid("b59113c765924f339a7a5111d366a1ab_4")}>
              <img src="https://easyreadfs.nosdn.127.net/VzVo0kDD9L-2lIK51MeHGA==/8796093024875545395" alt="" />
            </div>
            <div className="hummanlosttitle">
              了不起的盖茨比
              <div className="author">
                [美]F.S.菲茨杰拉德
              </div>
            </div>

          </div>
        </div>
        <div className="contentminbox pandp">
          <div className="panpimg" onClick={() => props.changebooksid("e2c386afa12f49c09287f050174bf6f5_4")}>
            <img src="https://easyreadfs.nosdn.127.net/wa0CGoE2-b327YGRxbbtoA==/8796093024904471717" alt="" />
          </div>
          <div className="pandptitle">傲慢与偏见</div>
          <div className="pandpauthor">[英]简·奥斯丁</div>
          <div className="pandpauthor">4人今日在读，推荐值79.3%</div>
        </div>
        <div className="contentminbox cristo">
          <div className="doublebox">
            <img src={double} alt="" />
          </div>
          <div className="hummanlostcontent">
            如果你渴望得到某样东西，你得让它自由，如果它回到你身边，它就是属于你的，如果它不会回来， 你就从未拥有过它.
          </div>
          <div className="hummanlostdetail">
            <div className="cover" onClick={() => props.changebooksid("3f7c891322fc4dc69c6368831a4d7617_4")}>
              <img src="https://easyreadfs.nosdn.127.net/gE8SviAbckWHy_6-Nov37w==/8796093024896580428" alt="" />
            </div>
            <div className="hummanlosttitle">
              基督山伯爵
              <div className="author">
                [法]大仲马
              </div>
            </div>

          </div>
        </div>
      </div>
      <div className="bottomblankbox"></div>
    </div>
  );
}
